<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 演示</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
  // 初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '折线图下方的渐变色面积示例'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'line',
        lineStyle: {
          type: 'dashed', // 设置虚线
          width: 1
        },
        label: {
          show: false
        },
        shadowStyle: {
          color: 'rgba(0, 0, 0, 0.3)' // 设置阴影
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '折线',
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line',
      // 设置折线的样式
      lineStyle: {
        color: 'blue', // 折线的颜色
        width: 2       // 折线的宽度
      },
      // 设置折线点的样式
      itemStyle: {
        color: 'red',       // 折线点的填充颜色
        borderColor: 'red'  // 折线点的边框颜色
      },
      symbol: 'circle',  // 设置折线点的形状为实心圆
      // 设置悬浮在点上时的样式
      emphasis: {
        itemStyle: {
          borderColor: 'white'  // 悬浮在点上时，折线点的边框颜色为白色
        }
      },
      // 使用渐变色填充
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(0, 128, 255, 0.7)' // 渐变色起始颜色
        }, {
          offset: 1,
          color: 'rgba(0, 128, 255, 0)' // 渐变色结束颜色
        }])
      }
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);



</script>
</body>
</html>
